import React from "react";
import main from "./main";
import PropTypes from "prop-types";
import provinceData from '../data/district.json';
import axios from "axios/index";
import styleSelect from "../css/SelectSchoolcss.css";
import styles from  "../css/Project.css";

class selectSchool extends React.Component {
    constructor(props, context){
        super(props, context);
        this.GxToken = this.props.location.state.GxToken;
        this.state = {
            province:"北京市",
            city:"北京市",
            sname:"",
            sid:'',
            id:'',
            county: "东城区",
            provinces:[],
            cityList: [],
            countyList: [],
            schools:[],
            sids:[]
        }
    }
    componentWillMount() {
        for(var key in provinceData) {
            this.state.provinces[key]=provinceData[key].province;
        }
        this.getCity(this.state.provinces[0]);
        this.getCounty(this.state.provinces[0],this.state.cityList[0]);
        this.getSchool();
    }
    getCity(province) {
        this.state.cityList=[];
        for(var key in provinceData) {
            if (provinceData[key].province==province){
                for (var keyCi in provinceData[key].cityList){
                    this.state.cityList[keyCi]=provinceData[key].cityList[keyCi].city;
                }
            }
        }
    }

    getCounty(province,city){
        this.state.countyList=[];
        this.state.sids=[];
        for(var key in provinceData) {
            if (provinceData[key].province==province){
                for (var keyCi in provinceData[key].cityList){
                    this.state.cityList[keyCi]=provinceData[key].cityList[keyCi].city;
                    if(provinceData[key].cityList[keyCi].city==city){
                        for (var keyCoun in provinceData[key].cityList[keyCi].countyList){
                            this.state.countyList[keyCoun]=provinceData[key].cityList[keyCi].countyList[keyCoun].county;
                            this.state.sids[keyCoun]=provinceData[key].cityList[keyCi].countyList[keyCoun];
                        }
                    }
                }
            }
        }
    }

    getAddressId(county){
        this.state.id='';
        for(var key in this.state.sids){
            if (this.state.sids[key].county==county){
                console.log("--------"+county+"---------"+this.state.sids[key].county)
                this.setState({
                    id:this.state.sids[key].id
                })
            }
        }

    }

    handleChange(name, e) {
        e.preventDefault()
        switch (name) {
            case "province":
                this.setState({
                    province: e.target.value,
                    cities: this.getCity(e.target.value),
                    city:this.state.cityList[0],
                    counties:this.getCounty(e.target.value, this.state.cityList[0]),
                    county:this.state.countyList[0]
                });
                this.state.province=e.target.value;
                this.state.city=this.state.cityList[0];
                this.state.county=this.state.countyList[0];
                this.getSchool();
                break;
            case "city":
                this.setState({
                    city: e.target.value,
                    counties: this.getCounty(this.state.province, e.target.value),
                    county:this.state.countyList[0]
                });
                this.getSchool();
                break;
            case "county":
                this.state.county=e.target.value;
                this.getSchool();
                this.getAddressId(e.target.value);
                break;
            case "school":
                this.state.sname=e.target.value;
                this.getSid(e.target.value)
                if(e.target.value=="请选择"){
                    alert("没有目标学校请拨打客服电话：02885283249，联系客服反馈。")
                }
                break;
            default:

        }

    }

    getSid(sidsss){
        for(var key in this.state.schools){
            if(sidsss==this.state.schools[key].sname){
                this.setState({
                    sid:this.state.schools[key].sid
                });
            }

        }
    }

    getSchool() {

        console.log(this.state.province+"--------"+this.state.city+"-----"+this.state.county);
        axios.get('http://guoxue.boyueguoxue.cn/Util/getSchool.do?province='+
            this.state.province+'&city='+this.state.city+'&county='+this.state.county+'&browsGxToken='+this.GxToken)
            .then(response => {
                let code=response.data.code;
                let message=response.data.message;
                console.log(response.data);
                if(code==200){
                    this.setState({schools:response.data.data});
                    console.log(this.state.schools[0]);
                    this.handleChange.bind(this, "school")
                }else {
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error)
            })
    }

    creatErwei() {
        console.log(this.state.id+"--------"+this.state.sid+"-----"+this.state.sname);
        if(this.state.id==""){
            alert("请选择城市")
            return
        }else if(this.state.sid==""){
            alert("请选择学校")
            return
        }

        axios.get('http://guoxue.boyueguoxue.cn/Channel/bindSchool.do?districtCid='+this.state.id+'&schoolCid='+this.state.sid+
            '&schoolName='+this.state.sname+'&browsGxToken='+this.GxToken)
            .then(response => {
                let code=response.data.code;
                let message=response.data.message;
                console.log('code'+code);
                console.log(response.data);
                if(code==200){
                    let data=response.data.data;
                    // this.context.router.push(  {pathname:'/main/',state:{uid:data.uid,GxToken:data.GxToken,GxSID:data.GxSID}});
                    this.context.router.push({pathname:'/ShowErwe/',state:{schoolName:data.schoolName,wxTicket:data.wxTicket,sceneId:data.sceneId,GxToken:this.GxToken}});
                }else {
                    if(message=="要绑定的学校名称错误"){
                        alert("请重新选择学校");
                        return
                    }
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error)
            })
    }


    render(){
        let id = 0;
        return(
            <div>

                <div className={styles["Project-layoutHead"]}><p></p></div>
                <div className={styles["Project-layoutBody"]}>

                    <div className={styleSelect["selectSchoolcss-divCenter"]}>
                        <input className={styleSelect["SelectSchoolcss-inputDefault"]} hidden="hidden"></input>


                        <p className="col-md-9">
                            <div className={styleSelect["selectSchoolcss-centerDiv"]}>

                                <label className={styleSelect["select-lblSelect"]}>
                                    <select placeholder="省"  className={styleSelect["SelectSchoolcss-select"]} onChange={this.handleChange.bind(this, "province")} >
                                        {this.state.provinces.map(province => (
                                            <option value={province} key={id++}>{province}</option>
                                        ))}
                                    </select>
                                </label>
                            </div>

                            <br/>
                            <br/>
                            <div className={styleSelect["selectSchoolcss-centerDiv"]}>

                                <label className={styleSelect["select-lblSelect"]}>
                                    <select placeholder="请选择" className={styleSelect["SelectSchoolcss-select"]} onChange={this.handleChange.bind(this, "city")}>
                                        {this.state.cityList.map(city => (
                                            <option value={city} key={id++}>{city}</option>
                                        ))}
                                    </select>
                                </label>
                            </div>
                            <br/>
                            <br/>

                            <div className={styleSelect["selectSchoolcss-centerDiv"]}>

                                <label className={styleSelect["select-lblSelect"]}>
                                    <select className={styleSelect["SelectSchoolcss-select"]} placeholder="请选择" onChange={this.handleChange.bind(this, "county")}>
                                        {this.state.countyList.map(county => (
                                            <option  value={county} key={id++}>{county}</option>
                                        ))}
                                    </select>
                                </label>
                            </div>
                            <br/>
                            <br/>
                            <div className={styleSelect["selectSchoolcss-centerDiv"]}>

                                <label className={styleSelect["select-lblSelect"]}>
                                    <select className={styleSelect["SelectSchoolcss-select"]}   onChange={this.handleChange.bind(this, "school")}>
                                        {this.state.schools.map(county => (
                                            <option  value={county.sname} key={id++}>{county.sname}</option>
                                        ))}

                                    </select>
                                </label>
                            </div>
                            <br/>
                            <br/>
                            <div className={styleSelect["selectSchoolcss-centerDiv"]}>
                                <label className={styleSelect["SelectSchoolcss-label"]}>生成二维码后，学校信息信息将不能修改，请勿随意生成!</label>
                            </div>
                            <br/>
                            <br/>
                            <div className={styleSelect["selectSchoolcss-centerDiv"]}>
                                <button className={styleSelect["SelectSchoolcss-button"]}  onClick={() => this.creatErwei()} >生成新二维码</button>
                            </div>
                        </p>
                    </div>
                    <div className={styles[""]}></div>
                </div>
                <a href="javascript:void(0);" onClick={() => this.kefu()}>联系客服</a>
            </div>
        )
    }


    kefu() {
        alert("请拨打客服电话：02885283249，联系客服反馈问题。")
    }
}
selectSchool.contextTypes = {
    router: PropTypes.object.isRequired
};
export default selectSchool;